<template>
  <div class="rock_chart">
    <div class="trend_chart_box">
      <div class="chart_box_left">
        <div
          class="panel-item"
          v-for="item in panelData"
          :key="item.label"
          :style="`background:${item.color}`"
        >
          <div>{{ item.label }}</div>
          <div>{{ item.value }}m</div>
        </div>
      </div>
      <div class="chart_box_right">
        <div class="progress-box">
          <div class="progress-content">
            <div
              class="progress-history"
              :style="{ width: historyWidth + '%' }"
            >
              历史态势
            </div>
            <div
              class="progress-future"
              :style="{ width: futureWidth + '%' }"
            >
              未来态势
            </div>
          </div>
          <div class="progress-scale">
            <div
              class="progress-scale-item"
              v-for="(item, index) in xData"
              :key="item.value"
              :style="{ width: item.width + '%' }"
            >
              <div class="progress-scale-line" v-show="index !== 0"></div>
              <div class="progress-scale-son" v-show="index !== 0">
                {{ dayFormat(item.value) }}
              </div>
            </div>
          </div>
          <div
            class="marking-line"
            :style="{ left: currentPosition + '%' }"
          >
            <span class="line-row1">{{ markingData.date }}</span>
            <span class="line-row2">{{ markingData.meter }}</span>
          </div>
        </div>
        <div class="play-button" @click="handlePlay">
          <span v-if="!isPlaying">播放</span>
          <span v-else>暂停</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ConstructionProgressChart',
  data() {
    return {
      panelData: [
        {
          label: '设计长度',
          value: '1530',
          color: 'linear-gradient(284deg, rgba(0, 107, 237, 0) 3%, rgba(0, 107, 237, 0.15) 95%)'
        },
        {
          label: '2024年实际完成',
          value: '1530',
          color: 'linear-gradient(284deg, rgba(149, 125, 243, 0) 3%, rgba(149, 125, 243, 0.15) 95%)'
        },
        {
          label: '2025年计划完成',
          value: '1530',
          color: 'linear-gradient(284deg, rgba(249, 175, 85, 0) 3%, rgba(249, 175, 85, 0.15) 95%)'
        }
      ],
      markingData: {
        date: '2024-07-03',
        meter: '123m'
      },
      currentPosition: 20,
      historyWidth: 40,
      isPlaying: false,
      animationInterval: null,
      xData: []
    }
  },
  computed: {
    futureWidth() {
      return 100 - this.historyWidth
    }
  },
  mounted() {
    this.xData = this.generateMonthlyFirstDays()
  },
  beforeDestroy() {
    this.stopAnimation()
  },
  methods: {
    handlePlay() {
      if (this.isPlaying) {
        this.stopAnimation()
      } else {
        this.startAnimation()
      }
      this.isPlaying = !this.isPlaying
    },
    startAnimation() {
      this.currentPosition = 0
      let progress = 0
      
      this.animationInterval = setInterval(() => {
        progress += 1
        if (progress > 100) {
          progress = 0
        }
        
        this.currentPosition = progress
        
        // 更新标记线数据
        if (progress % 20 === 0) {
          const date = this.$dayjs('2024-07-01').add(Math.floor(progress/5), 'month').format('YYYY-MM-DD')
          this.markingData = {
            date: date,
            meter: `${Math.floor(1530 * progress / 100)}m`
          }
        }
      }, 50)
    },
    stopAnimation() {
      if (this.animationInterval) {
        clearInterval(this.animationInterval)
        this.animationInterval = null
      }
    },
    dayFormat(value) {
      return this.$dayjs(value).format('MM-DD')
    },
    generateMonthlyFirstDays() {
      const start = this.$dayjs('2024-07-01')
      const end = this.$dayjs().startOf('month')
      const firstDayList = []
      let current = start
      
      while (current.isBefore(end) || current.isSame(end)) {
        firstDayList.push({
          value: current.format('YYYY-MM-DD'),
          width: 100 / 14  // 假设14个月份
        })
        current = current.add(1, 'month')
      }
      
      // 添加未来月份
      const futureMonths = 6
      for (let i = 1; i <= futureMonths; i++) {
        const date = end.add(i, 'month').format('YYYY-MM-DD')
        firstDayList.push({
          value: date,
          width: 100 / 14
        })
      }
      
      return firstDayList
    }
  }
}
</script>

<style scoped>
.rock_chart {
  position: absolute;
  bottom: 74px;
  left: 23%;
  width: 55%;
  height: 25%;
  padding: 15px;
  border: 3px solid white;
  border-radius: 12px;
  background-color: #f4f7fa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.trend_chart_box {
  display: flex;
  height: calc(100% - 30px);
  position: relative;
}

.chart_box_left {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 140px;
}

.panel-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 12px;
  width: 125px;
  height: 54px;
  font-size: 14px;
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 107, 237, 0.2);
}

.chart_box_right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: calc(100% - 165px);
}

.progress-box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 80%;
  justify-content: center;
}

.progress-content {
  display: flex;
  width: 100%;
  height: 20px;
  font-size: 12px;
  background: #999;
  border-radius: 20px;
  color: #fff;
  overflow: hidden;
}

.progress-history {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #97df97 0%, #63cb63 100%);
}

.progress-future {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(270deg, #a1a1a1 0%, #bfbfbf 100%);
}

.progress-scale {
  display: flex;
  width: 100%;
}

.progress-scale-item {
  position: relative;
  font-size: 12px;
  text-align: center;
}

.progress-scale-line {
  position: absolute;
  left: 0;
  top: -6px;
  width: 1px;
  height: 6px;
  background-color: #999;
}

.progress-scale-son {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8px;
  white-space: nowrap;
}

.marking-line {
  position: absolute;
  top: 50%;
  bottom: 0;
  width: 0;
  height: 60%;
  border-left: 2px solid #1890ff;
  transition: left 0.3s;
  z-index: 2;
  transform: translateY(-50%);
  color: #1890ff;
}

.marking-line::after {
  content: '';
  position: absolute;
  top: -5px;
  right: -4px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #1890ff;
}

.line-row1 {
  font-size: 12px;
  width: 70px;
  display: inline-block;
  position: absolute;
  bottom: -20px;
  left: -35px;
}

.line-row2 {
  font-size: 12px;
  width: 70px;
  display: inline-block;
  position: absolute;
  top: -20px;
  left: -35px;
}

.play-button {
  margin-top: 10px;
  padding: 6px 12px;
  background: #1890ff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  width: 60px;
}

.play-button:hover {
  background: #40a9ff;
}
</style>